import React from "react";
import ReactDOM from "react-dom/client";

/**
 * static getDerivedStateFromProps()
 * 从 props 身上得到一份 衍生（派生）的state 数据      = vue computed
 *
 *    1. 接收两个参数
 *        props 当前的props数据
 *        state 当前的state数据
 *    2. 必须有返回值，要么返回一个对象，要么返回一个 null
 *        返回对象：这个对象会合并到 state 中
 *        返回null: 就不会合并到 state 中
 *    3. 当前组件，必须要有初始化的state
 *    4. 这些派生的state不能修改。
 *       修改了也没有用
 *       setState 也会触发 getDerivedStateFromProps 函数。
 *
 */
class Hello extends React.PureComponent {
  state = {};

  componentDidMount() {
    console.log("Hello - componentDidMount");
  }

  componentDidUpdate() {
    console.log("Hello - componentDidUpdate");
  }

  // static getDerivedStateFromProps(props, state) {
  //   console.log("Hello - getDerivedStateFromProps", props, state);
  //   return {
  //     firstName: props.name.split("")[0],
  //     lastName: props.name.split("")[1],
  //   };
  // }

  // render() {
  //   console.log("Hello - render");
  //   return (
  //     <div>
  //       <h1>Hello, {this.props.name}</h1>
  //       <p>你的姓：{this.state.firstName}</p>
  //       <p>你的名：{this.state.lastName}</p>
  //       <button
  //         onClick={() => {
  //           this.setState({
  //             firstName: "王",
  //           });
  //         }}
  //       >
  //         修改姓 为王
  //       </button>
  //     </div>
  //   );
  // }

  render() {
    console.log("Hello - render");

    const firstName = this.props.name.split("")[0];
    const lastName = this.props.name.split("")[1];
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <p>你的姓：{firstName}</p>
        <p>你的名：{lastName}</p>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    person: {
      name: "张三",
      age: 18,
    },
  };

  render() {
    console.log("App - render");
    return (
      <div>
        <h1>App</h1>
        <p>姓名：{this.state.person.name}</p>
        <p>年龄：{this.state.person.age}</p>

        <button
          onClick={() => {
            this.setState({
              person: {
                ...this.state.person,
                name: "李四",
              },
            });
          }}
        >
          修改姓名为李四
        </button>

        <button
          onClick={() => {
            this.setState({
              person: {
                ...this.state.person,
                age: 20,
              },
            });
          }}
        >
          修改年龄为20
        </button>

        <Hello name={this.state.person.name} fn1={this.fn1} />
      </div>
    );
  }

  fn1 = () => {
    console.log("fn1");
  };
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
